<template>
  <div class="page-container" >
    <div class="toolbar" style="padding-top:10px;padding-left:15px;" >
        <el-row style="text-align: center;margin-top: -18px;">
          <div v-if="isShow" style="border: 1px solid #DCDFE6;margin: 1% 0 1.5% 0;">
            <el-form :inline="true" size="medium" label-widt="120" class="viewForm">
              <el-form-item label="商户编码：">
                  <span class="color333 font26">{{companyConcatForm.orgNumber}}</span>
              </el-form-item>
              <el-form-item label="商户名称：">
                  <span class="color333 font26">{{companyConcatForm.name}}</span>
              </el-form-item>
              <el-form-item label="审核状态：">
                  <span class="color333 font26" v-if="companyConcatForm.retailStatus == 1">待提交</span>
                  <span class="color333 font26" v-if="companyConcatForm.retailStatus == 2">待审核</span>
                  <span class="color333 font26" v-if="companyConcatForm.retailStatus == 3">审核通过</span>
                  <span class="color333 font26" v-if="companyConcatForm.retailStatus == 4">审核不通过</span>
              </el-form-item>
            </el-form>
            <el-row class="view-button">
                <kt-button label="提交审核" style="text-align: center;" size="small" v-if="companyConcatForm.retailStatus == 1 || companyConcatForm.retailStatus == 4"  @click="submitReview(companyConcatForm)" />
                <kt-button label="撤销提交" style="text-align: center;" size="small" v-if="companyConcatForm.retailStatus == 2 "  @click="revokeReview(companyConcatForm)" />
                <kt-button label="审核" style="text-align: center;" size="small" v-if="companyConcatForm.retailStatus == 2" @click="merchantReviewView(companyConcatForm)" />
            </el-row>
          </div>
          <!-- table切换 -->
         <el-tabs type="border-card">
          <el-tab-pane label="基本信息" >
             <el-form :inline="true" :model="companyConcatForm" label-width="165px" style="text-align:center;" ref="companyConcatForm" :rules="dataFormRules" :size="size" class="form" >
               <el-row style="margin-top: -20px;">
                 <el-form-item label="ID：" prop="id" v-if="false">
                    <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
                 </el-form-item>
                <el-divider content-position="center">
                    <span style="font-size:16px;font-weight:800">
                      商户基本信息
                    </span>
						    </el-divider>
                 <el-row class="searchDialog-input">
                     <el-form-item label="商户编码："  prop="orgNumber">
                  <el-input v-model="companyConcatForm.orgNumber" auto-complete="off" disabled placeholder="系统自动生成"></el-input>
                </el-form-item>
                <el-form-item label="商户名称："  prop="name">
                  <el-input v-model="companyConcatForm.name" auto-complete="off" :disabled="isShow" placeholder="请输入商户名称 -前端展示名称"></el-input>
                </el-form-item>
                <el-form-item label="商户类型："  prop="merchantType">
                  <el-select v-model="companyConcatForm.merchantType" style="width:880px" :disabled="isShow">
                    <el-option label="自营" :value="1">自营</el-option>
                    <el-option label="入驻商户" :value="2">入驻商户</el-option>
                  </el-select>
                </el-form-item>
              </el-row>
               </el-row>
               <el-row style="margin-top: -20px;">
                <el-divider content-position="center">
                    <span style="font-size:16px;font-weight:800">
                      公司信息
                    </span>
						    </el-divider>
                <el-row class="searchDialog-input">
                  <el-form-item label="公司名称："  prop="companyName">
                    <el-input v-model="companyConcatForm.companyName" auto-complete="off" maxlength="50" :disabled="isShow" placeholder="支持1-50个字符"></el-input>
                  </el-form-item>
                <el-form-item label="法人姓名："  prop="legalPersonName">
                  <el-input v-model="companyConcatForm.legalPersonName" auto-complete="off" maxlength="20" :disabled="isShow" placeholder="支持1-20个字符"></el-input>
                </el-form-item>
                <el-form-item label="法人证件类型："  prop="merchantType">
                  <el-select v-model="companyConcatForm.merchantType" style="width:880px" :disabled="isShow">
                    <el-option label="身份证" :value="1">身份证</el-option>
                    <el-option label="驾驶证" :value="2">驾驶证</el-option>
                    <el-option label="护照" :value="3">护照</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="法人证件号码："  prop="legalPersonIdNumber">
                  <el-input v-model="companyConcatForm.legalPersonIdNumber" maxlength="30" auto-complete="off" :disabled="isShow"  placeholder="仅支持英文、数字，支持1-30个字符"></el-input>
                </el-form-item>
                <el-form-item label="法人手机号码："  prop="legalPersonMobile">
                  <el-input v-model="companyConcatForm.legalPersonMobile" auto-complete="off" :disabled="isShow" maxlength="11"
					           show-word-limit placeholder="请输入法人手机号码"></el-input>
                </el-form-item>
                <el-form-item label="法人身份证有效期限："  prop="credentialsDate">
                  <el-input v-model="companyConcatForm.credentialsDate" auto-complete="off" :disabled="isShow" placeholder="xx年xx月xx日-xx年xx月xx日"></el-input>
                </el-form-item>
                <el-form-item label="营业执照号码："  prop="businessLicenseNumber">
                  <el-input v-model="companyConcatForm.businessLicenseNumber" auto-complete="off" :disabled="isShow"
                   maxlength="22" placeholder="请输入营业执照号码"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码："  prop="socialCreditCode">
                  <el-input v-model="companyConcatForm.socialCreditCode" auto-complete="off" :disabled="isShow"
                   maxlength="22" placeholder="请输入统一社会信用代码"></el-input>
                </el-form-item>
                <el-form-item label="公司类型："  prop="companyType" >
                  <el-select v-model="companyConcatForm.companyType" :disabled="isShow">
                     <el-option label="有限责任公司" :value="1">有限责任公司</el-option>
                     <el-option label="股份有限责任公司" :value="2">股份有限责任公司</el-option>
                     <el-option label="个人独资企业" :value="3">个人独资企业</el-option>
                     <el-option label="合伙企业" :value="4">合伙企业</el-option>
                     <el-option label="个体工商户" :value="5">个体工商户</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="经营范围："  prop="businessScope" >
                  <el-input v-model="companyConcatForm.businessScope" auto-complete="off" :disabled="isShow" type="textarea" style="width:880px" maxlength="800" show-word-limit ></el-input>
                </el-form-item>

                <el-form-item label="营业执照成立日期："  prop="businessLicenseDate">
                  <el-input v-model="companyConcatForm.businessLicenseDate" auto-complete="off" :disabled="isShow" maxlength="60" placeholder="请输入营业执照成立日期"></el-input>
                </el-form-item>

                <el-form-item label="营业执照期限：" prop="businessStart" style="margin-top: 9px; margin-right: 42%;">
                  <el-col :span="11">
                    <el-form-item prop="businessStart">
                      <el-date-picker v-model="companyConcatForm.businessStart" type="date" style="width:100px !important;"  placeholder="开始时间起"  value-format="yyyy-MM-dd HH:mm:ss" :disabled="isShow"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item prop="businessEnd">
                      <el-date-picker v-model="companyConcatForm.businessEnd" type="date" style="width:100px !important;"  placeholder="开始时间止"  value-format="yyyy-MM-dd HH:mm:ss" :disabled="isShow"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="公司注册地址："  prop="registeredProvinceId" >
                   <div style="width:880px">
                        <v-distpicker  @selected='selected' :province="companyConcatForm.registeredProvinceId" :city="companyConcatForm.registeredCityId" :area="companyConcatForm.registeredRegionId" :disabled="isShow"></v-distpicker>
                   </div>
                </el-form-item>
                <el-form-item label="详细地址："  prop="registeredDetailAddress" >
                  <el-input v-model="companyConcatForm.registeredDetailAddress" auto-complete="off" placeholder="支持1-100个字符" maxlength="100" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="公司注册资金："  prop="registeredCapital" >
                  <el-input v-model="companyConcatForm.registeredCapital" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="公司总人数："  prop="population" >
                  <el-input v-model="companyConcatForm.population" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="经营情况："  prop="businessConditions" >
                  <el-input v-model="companyConcatForm.businessConditions" auto-complete="off" :disabled="isShow" type="textarea" style="width:880px" maxlength="200" show-word-limit ></el-input>
                </el-form-item>
                <el-form-item label="机构类别："  prop="institutionsCategory" >
                  <el-select v-model="companyConcatForm.institutionsCategory" :disabled="isShow">
                     <el-option label="消极非金融机构" :value="1">消极非金融机构</el-option>
                     <el-option label="其他非金融机构" :value="2">其他非金融机构</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="机构税收居民身份："  prop="taxResidentIdentity" >
                  <el-select v-model="companyConcatForm.taxResidentIdentity" :disabled="isShow">
                     <el-option label="仅为中国税收居民" :value="1">仅为中国税收居民</el-option>
                     <el-option label="仅为非居民" :value="2">仅为非居民</el-option>
                     <el-option label="既是中国税收居民又是其他国家（地区）税收居民" :value="3">既是中国税收居民又是其他国家（地区）税收居民</el-option>
                  </el-select>
                </el-form-item>

                 </el-row>
               </el-row>

               <el-row style="margin-top: -20px;">
                <el-divider content-position="center">
                    <span style="font-size:16px;font-weight:800">
                      联系信息
                    </span>
						    </el-divider>

                 <el-row class="searchDialog-input">
                    <el-form-item label="联系人姓名："  prop="contactName" >
                  <el-input v-model="companyConcatForm.contactName" auto-complete="off" :disabled="isShow" placeholder="请输入联系人姓名"></el-input>
                </el-form-item>

                <el-form-item label="联系手机："  prop="contactMobile" >
                  <el-input v-model="companyConcatForm.contactMobile" auto-complete="off" :disabled="isShow" maxlength="11"
					             show-word-limit placeholder="请输入联系手机"></el-input>
                </el-form-item>
                <el-form-item label="联系人邮箱："  prop="contactEmail"  >
                  <el-input v-model="companyConcatForm.contactEmail" auto-complete="off" maxlength="30" :disabled="isShow" placeholder="请输入联系人邮箱" ></el-input>
                </el-form-item>
                 <el-col :span="24">
                    <el-form-item label="联系地址："  prop="contact_address_province_id">
                      <div style="width:880px">
                        <v-distpicker  @selected='selectContact' :province="companyConcatForm.contactAddressProvinceId" :city="companyConcatForm.contactAddressCityId" :area="companyConcatForm.contactAddressRegionId" :disabled="isShow"></v-distpicker>
                      </div>
                    </el-form-item>
                 </el-col>
                <el-form-item label="详细地址："  prop="contactAddressDetail" >
                  <el-input v-model="companyConcatForm.contactAddressDetail" auto-complete="off" maxlength="100" :disabled="isShow" placeholder="支持1-100个字符"></el-input>
                </el-form-item>
                <el-form-item label="客服联系方式："  prop="customerServiceContact" >
                  <el-input v-model="companyConcatForm.customerServiceContact" auto-complete="off" :disabled="isShow" placeholder="座机&手机"></el-input>
                </el-form-item>
                <el-form-item label="服务时间说明："  prop="serviceTime" >
                  <el-input v-model="companyConcatForm.serviceTime" auto-complete="off" :disabled="isShow" placeholder="例：周一至周五 10:00-19:00（节假日除外）"></el-input>
                </el-form-item>

                 </el-row>
               </el-row>
             </el-form>
             <div class="item clearfix pt_10 mb_0">
              <el-checkbox id="check" type="checkbox" style="color: red" class="el-checkbox" v-model="acProtocol"></el-checkbox>
              <label for="js-mobile-check" class="txt_check_label gray">
                我已阅读并同意
               <span @click="aleryTerm()">
                    <font color="blue">《{{this.terms}}》</font>
                </span>
              </label>
              <div slot="footer" class="dialog-footer" style="text-align:center">
                <!-- </br> -->
                <!-- </br> -->
                <el-button :size="size" type="primary" v-show="!isShow">取消</el-button>
                <el-button :size="size" type="primary" @click.native="submitForm" v-show="!isShow">保存</el-button>
              </div>
            </div>

          </el-tab-pane>

          <!-- 资质证书 -->
          <el-tab-pane label="资质证书" >
            <div style="text-align: right;" class="margin">
               <el-button :size="size" @click="addCertifications" type="primary" style="text-align:left" v-show="!isShow">添加资质证书</el-button>
            </div>
						<template>
							<el-table :data="tableDataCertifications" border style="width: 100%">
								<el-table-column prop="certificateName" label="证书名称" width="200">
                  <template slot-scope="scope">
                    <span v-if="['1','2','3',,'4','5'].includes(scope.row.certificateType)">* {{scope.row.certificateName}}</span>
                    <span v-else>{{scope.row.certificateName}}</span>
                  </template>
                </el-table-column>
								<el-table-column prop="periodBegin" label="证书有效期" width="400">
                  <template slot-scope="scope">
                     <span v-if="scope.row.periodBegin"> {{scope.row.periodBegin}} -- {{scope.row.periodEnd}}</span>
                     <span v-else> - </span>
                  </template>
                </el-table-column>
								<el-table-column prop="fileUrl" label="	证书图片">
                   <template slot-scope="scope">
                    <img :src="scope.row.fileUrl"  min-width="80" height="80" />
                   </template>
                </el-table-column>
                <el-table-column	fixed="right" label="操作"	width="200" v-if="!isShow">
                  <template slot-scope="scope">
                      <el-button type="primary" size="small" @click="eidtCertificate(scope.row)" :disabled="isShow">编辑</el-button>
                      <el-button v-if="!['1','2','3',,'4','5'].includes(scope.row.certificateType)" type="danger" size="small" @click="deleteCertificate(scope.row.id)" :disabled="isShow">删除</el-button>
                  </template>
                </el-table-column>
							</el-table>
						</template>

              <!-- 添加资质文件 -->
              <el-dialog title="添加资质文件" width="40%" :visible.sync="certificationModal" :close-on-click-modal="false" @closed="handleCloseCertificate">
                <el-form :model="certificationForm" label-width="130px" :rules="certificationRules" ref="certificationForm" :size="size"
                  label-position="right" inline>
                  <el-row class="searchDialog-input">
                    <el-form-item label="ID" prop="id" v-if="false">
                    <el-input v-model="certificationForm.id" :disabled="true" auto-complete="off" placeholder="请输入"></el-input>
                  </el-form-item>
                    <el-form-item label="证书名称：" prop="certificateName">
                        <el-input v-model="certificationForm.certificateName"  auto-complete="off" style="width:350px" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="证书有效期：" prop="periodBegin">
                      <el-col :span="10">
                         <el-date-picker v-model="certificationForm.periodBegin" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
                      </el-col>
                      <el-col class="line" :span="4">至</el-col>
                      <el-col :span="10">
                        <el-date-picker v-model="certificationForm.periodEnd"  value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="证书图片：" prop="fileUrl">
                      <div style="float: left;">
                        <ul class="el-upload-list el-upload-list--picture-card">
                          <li
                            v-for="(bill_photo,index) in bill_photo_list"
                            :key="index"
                            :tabindex="index"
                            class="el-upload-list__item is-success"
                          >
                            <img :src="bill_photo" alt class="el-upload-list__item-thumbnail" />
                            <label class="el-upload-list__item-status-label">
                              <i class="el-icon-upload-success el-icon-check"></i>
                            </label>
                            <i class="el-icon-close"></i>
                            <span class="el-upload-list__item-actions">
                              <span class="el-upload-list__item-preview">
                                <i class="el-icon-zoom-in" @click="handlePictureCardPreview(null,bill_photo)"></i>
                              </span>
                              <span class="el-upload-list__item-delete">
                                <i class="el-icon-delete" @click="handleRemove(null,null,index)"></i>
                              </span>
                            </span>
                          </li>
                        </ul>
                      </div>

                      <el-upload
                        :action="imgUpload"
                        :on-success="handleAvatarSuccess"
                        list-type="picture-card"
                        v-model="certificationForm.fileUrl"
                        accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :limit="1"
                        ref="upload"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisibleImage">
                        <img width="100%" :src="dialogImageUrl" alt />
                      </el-dialog>
                    </el-form-item>
                     <el-form-item label="备注：" prop="description">
                      <el-input v-model="certificationForm.description"  auto-complete="off" style="width:350px"
                      type="textarea" maxlength="200" placeholder="请输入备注" show-word-limit></el-input>
                    </el-form-item>

                  </el-row>

                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center">
                  <el-button :size="size" @click="saveCertification"  type="primary">确认</el-button>
                  <el-button :size="size" @click.native="certificationModal = false">{{$t('action.cancel')}}</el-button>
                </div>
              </el-dialog>

          </el-tab-pane>

          <!-- 销售区域 -->
          <el-tab-pane label="销售区域" >
            <div style="text-align: right;" class="margin">
               <el-button :size="size" @click="addArea" type="primary" style="text-align:left"  v-if="!isShow">添加</el-button>
            </div>
						<template>
							<el-table :data="tableDataCertifications" border style="width: 100%">
								<el-table-column prop="periodBegin" label="销售区域编码" width="300">
                  <template slot-scope="scope">
                    <span>SPO93445578</span>
                  </template>
                </el-table-column>
                <el-table-column prop="periodBegin" label="销售区域名称（省级）" width="300">
                  <template slot-scope="scope">
                    <span>上海</span>
                  </template>
                </el-table-column>
                <el-table-column prop="periodBegin" label="销售区域名称（地市级）" width="350">
                  <template slot-scope="scope">
                    <span>上海</span>
                  </template>
                </el-table-column>
                <el-table-column prop="periodBegin" label="销售区域名称（区县级）" >
                  <template slot-scope="scope">
                    <span>浦东新区</span>
                  </template>
                </el-table-column>
                <el-table-column	fixed="right" label="操作"	width="200"  v-if="!isShow">
                  <template slot-scope="scope">
                      <el-button type="danger" size="small" @click="deleteCertificate(scope.row.id)" :disabled="isShow">删除</el-button>
                  </template>
                </el-table-column>
							</el-table>
						</template>

              <!-- 添加销售区域 -->
              <el-dialog title="添加销售区域" width="35%" :visible.sync="showArea" :close-on-click-modal="false" @closed="handleCloseCertificate">
                <el-form :model="certificationForm" label-width="130px" :rules="certificationRules" ref="certificationForm" :size="size"
                  label-position="right" inline>

                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center">
                  <el-button :size="size" @click="saveCertification"  type="primary">确认</el-button>
                  <el-button :size="size" @click.native="showArea = false">{{$t('action.cancel')}}</el-button>
                </div>
              </el-dialog>

          </el-tab-pane>

          <!-- 财务信息 -->
          <el-tab-pane label="财务信息">
            <el-form :inline="true" :model="financeForm" label-width="250px" style="text-align:center;" ref="financeForm" :rules="financeRules" :size="size" class="form">

               <el-row style="margin-top: -28px;" class="searchDialog-input">
                <el-divider content-position="center">
                    <span style="font-size:18px;font-weight:800">
                      结算信息
                    </span>
						    </el-divider>
                <el-form-item label="商户结算账户类型："  prop="settlementAccountType">
                  <el-select v-model="financeForm.settlementAccountType" @change="chooseApply" :disabled="isShow">
                     <el-option label="网银" :value="1">网银</el-option>
                     <el-option label="微信" :value="2">微信</el-option>
                     <el-option label="支付宝" :value="3">支付宝</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="支付宝账号："  prop="alipayAccount" v-if="alipay">
                  <el-input v-model="financeForm.alipayAccount" auto-complete="off" oninput="value=value.replace(/[^\d]/g,'')" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="微信账号："  prop="wechatAccount" v-if="wechat">
                  <el-input v-model="financeForm.wechatAccount" auto-complete="off"  :disabled="isShow"></el-input>
                </el-form-item>
               </el-row>
               <!-- 保证金信息 -->
               <el-row class="searchDialog-input">
                 <el-divider content-position="center">
                    <span style="font-size:18px;font-weight:800">保证金信息</span>
						    </el-divider>
                <el-form-item label="保证金账户名称："  prop="suretyAccountName">
                  <el-input v-model="financeForm.suretyAccountName" placeholder="请输入保证金账户名称" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="保证金账户账号："  prop="suretyAccount">
                  <el-input v-model="financeForm.suretyAccount" placeholder="请输入保证金账户账号" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="保证金金额："  prop="suretyAmount">
                  <el-input v-model="financeForm.suretyAmount" placeholder="请输入保证金金额" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="保证金账户受益人姓名："  prop="beneficiaryName">
                  <el-input v-model="financeForm.beneficiaryName" placeholder="请输入保证金账户受益人姓名" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="保证金账户受益人联系方式："  prop="beneficiaryMobile">
                  <el-input v-model="financeForm.beneficiaryMobile" placeholder="请输入保证金账户受益人联系方式" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="保证金账户受益人证件号码："  prop="beneficiaryLicenseNumber">
                  <el-input v-model="financeForm.beneficiaryLicenseNumber" placeholder="请输入保证金账户受益人证件号码" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="保证金账户受益人身份证有效期限："  prop="beneficiaryCertificateDate">
                  <el-input v-model="financeForm.beneficiaryCertificateDate" placeholder="请输入保证金账户受益人身份证有效期限" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="保证金账户受益人地址："  prop="beneficiaryAddress">
                  <el-input v-model="financeForm.beneficiaryAddress" placeholder="请输入保证金账户受益人地址" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
               </el-row>

               <!-- 税务信息 -->
               <el-row class="searchDialog-input">
                 <el-divider content-position="center">
                    <span style="font-size:18px;font-weight:800">税务信息</span>
						    </el-divider>
                <el-form-item label="发票客户编码："  prop="invoiceCustomerCode">
                  <el-input v-model="financeForm.invoiceCustomerCode" placeholder="请输入发票客户编码" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="发票抬头："  prop="invoiceTitle">
                  <el-input v-model="financeForm.invoiceTitle" placeholder="请输入发票抬头" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="纳税人识别码："  prop="taxpayerCode">
                  <el-input v-model="financeForm.taxpayerCode" placeholder="请输入纳税人识别码" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="地址："  prop="taxpayerAddress">
                  <el-input v-model="financeForm.taxpayerAddress" placeholder="请输入地址" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="电话："  prop="taxpayerPhone">
                  <el-input v-model="financeForm.taxpayerPhone" placeholder="电话" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="开户行："  prop="accountBank">
                  <el-input v-model="financeForm.accountBank" placeholder="开户行" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="开户账号："  prop="account">
                  <el-input v-model="financeForm.account" placeholder="开户账号" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="发票邮寄地址："  prop="invoiceMailingAddress">
                  <el-input v-model="financeForm.invoiceMailingAddress" placeholder="请输入发票邮寄地址" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="发票收件人姓名："  prop="invoiceRecipientName">
                  <el-input v-model="financeForm.invoiceRecipientName" placeholder="请输入发票收件人姓名" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="发票收件人电话："  prop="invoiceRecipientPhone">
                  <el-input v-model="financeForm.invoiceRecipientPhone" placeholder="发票收件人电话" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="对账地址："  prop="reconciliationAddress">
                  <el-input v-model="financeForm.reconciliationAddress" placeholder="请输入对账地址" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="对账联系人电话："  prop="reconciliationPhone">
                  <el-input v-model="financeForm.reconciliationPhone" placeholder="对账联系人电话" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
               </el-row>

               <!-- 客户发票信息 -->
               <el-row class="searchDialog-input">
                 <el-divider content-position="center">
                    <span style="font-size:18px;font-weight:800">客户发票信息</span>
						    </el-divider>
                <el-form-item label="支持发票抬头："  prop="invoiceTitleTypeList" label-width="170">
                  <el-checkbox-group v-model="invoiceTitleTypeList">
                    <el-checkbox label="1">不支持</el-checkbox>
                    <el-checkbox label="2">个人</el-checkbox>
                    <el-checkbox label="3">单位</el-checkbox>
                    <el-checkbox label="4" >个人&单位</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
               </el-row>
               <el-row>
                 <el-form-item label="支持发票类型："  prop="accountName" label-width="170">
                  <el-checkbox-group v-model="invoiceTypeList">
                    <el-checkbox label="1">不支持</el-checkbox>
                    <el-checkbox label="2">电子发票</el-checkbox>
                    <el-checkbox label="3">纸质发票</el-checkbox>
                    <el-checkbox label="4" >纸质&电子</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
               </el-row>



             </el-form>
             <div class="item clearfix pt_10 mb_0">
              <div slot="footer" class="dialog-footer" style="text-align:center">
                 <br>
                 <br>
                <el-button :size="size" type="primary" @click.native="submitFinanceForm" v-if="!isShow">保存</el-button>
              </div>
            </div>
          </el-tab-pane>

          <!-- 合同管理 -->
          <el-tab-pane label="合同管理">
             <div style="text-align: right;" class="margin">
               <el-button :size="size" @click="addContract " type="primary" style="text-align:left"  v-if="!isShow">新增</el-button>
            </div>
						<template>
							<el-table :data="contractList" border style="width: 100%">
								<el-table-column prop="contractCode" label="合同编码" width="320"></el-table-column>
								<el-table-column prop="isValidVal" label="	是否失效" width="200" ></el-table-column>
								<el-table-column prop="contractStartDate" label="	合同生效时间" width="250"></el-table-column>
                <el-table-column prop="contractEndDate" label="合同失效时间" width="250"></el-table-column>
								<el-table-column prop="creatorName" label="	创建人" ></el-table-column>
                <el-table-column	fixed="right" label="操作"	width="200" v-if="!isShow">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="getContractInfo(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
							</el-table>
						</template>
              <!-- 添加合同 -->
              <el-dialog title="新增合同" width="45%" :visible.sync="showContract" :close-on-click-modal="false">
                <el-form :model="contractForm" label-width="130px" :rules="contractFormRules" ref="contractForm" :size="size"
                  label-position="right" inline>
                  <el-form-item label="合同编码：" prop="contractCode">
                    <el-input :disabled="!showAddContract" v-model="contractForm.contractCode"  auto-complete="off" style="width:450px" placeholder="请输入合同编码"></el-input>
                  </el-form-item>
                  <el-form-item label="合同生效期：" prop="contractDate">
                    <el-date-picker :disabled="!showAddContract" type="daterange" v-model="contractForm.contractDate" range-separator="至" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"  start-placeholder="开始日期" end-placeholder="结束日期" style="width:450px" ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="" prop="contractFileList">
                    <el-upload
                      class="upload-demo"
                      :action="this.imgUpload"
                      :show-file-list="false"
                      :on-success="contractFileSuccess">
                      <el-button size="small" type="primary" :disabled="!showAddContract">上传合同附件</el-button>
                    </el-upload>
                    <el-table :data="contractForm.contractFileList" stripe style="width: 100%">
                      <el-table-column prop="fileName" label="*附件名称" width="150"></el-table-column>
                      <el-table-column prop="creatorName" label="上传人" width="150"></el-table-column>
                      <el-table-column prop="createTime" label="上传时间" width="150"></el-table-column>
                      <el-table-column	fixed="right" label="操作" width="350">
                        <template slot-scope="scope">
                          <a v-show="false" :id="'downFile'+scope.row.id" :href="scope.row.fileUrl"></a>
                          <el-button type="text" size="mini" :disabled="!showAddContract" @click="downloadContractFile(scope.row.fileUrl,'downFile'+scope.row.id)">下载</el-button>
                          <el-button type="text" size="mini" :disabled="!showAddContract" @click="uploadContract()">重新上传</el-button>
                          <el-button type="text" size="mini" :disabled="!showAddContract" @click="deleteContractFile(scope.row.id)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                  <el-form-item label="备注信息：" prop="remark">
                    <el-input :disabled="!showAddContract" v-model="contractForm.remark"  auto-complete="off" style="width:350px" placeholder="请输入备注信息"></el-input>
                  </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center">
                  <el-button :size="size" @click="addContractInfo()"  type="primary" v-show="showAddContract">保存</el-button>
                  <el-button :size="size" @click.native="showContract = false">返回</el-button>
                </div>
              </el-dialog>
          </el-tab-pane>

           <el-dialog title="商户入驻条款" width="40%" :center="true" :visible.sync="termModel" :close-on-click-modal="false">
           <el-form label-width="100px" :size="size" label-position="right" inline>
              <el-row>
                <div class="contentStyle" v-html="content"></div>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center">
              <el-button :size="size" @click="clearTermModel">{{$t('action.cancel')}}</el-button>
            </div>
          </el-dialog>
        </el-tabs>
        </el-row>
        
        <!-- 审核弹窗 -->
        <el-dialog class="el-dialog-style" title="审核" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="verifyForm" ref="verifyForm">
              <el-form-item label="审核结果：" label-width="125px" prop="retailStatus">
                <el-radio-group v-model="verifyForm.retailStatus">
                  <el-radio :label="3">审核通过</el-radio>
                  <el-radio :label="4">审核不通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="审核不通过原因：" label-width="125px" prop="reviewReason">
                  <el-input :rows="4" clearable v-model="verifyForm.reviewReason" autocomplete="off" maxlength="200" type="textarea" style="min-height: 33px; max-width: 75%; "></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" plain @click="dialogFormVisible = false" size="mini" class="cancelButton">取消</el-button>
                <el-button type="primary" @click="merchantReview()" size="mini" class="searchButton">确认</el-button>
            </div>
        </el-dialog>
    </div>

  </div>
</template>

<script>
// import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { mapState } from "vuex";
import Cookies from "js-cookie";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import Vue from "vue";
import VDistpicker from 'v-distpicker';
import elTree from '@/views/tree/src/tree.vue'
import {validatePhone,validateContacts,isEmail,isNumber} from '@/utils/validate'
import merchantRequest from "@/request/merchantRequest";
import KtButton from "@/views/Core/KtButton";


export default {
  name: "Login",
  components: {
    ThemePicker,
    LangSelector,
    VDistpicker,
    elTree,
    KtButton,

  },
  data() {

    //商户财务信息 - 结算类型 支付宝
    var checkAlipayAccount = (rule, value, callback) => {
        if (this.financeForm.settlementAccountType == 1) {
            if (!value) {
                callback(new Error("请输入支付宝账号"));
            } else {
                callback();
            }
        } else {
            callback();
        }
    };
    //商户财务信息 - 结算类型 微信
    var checkWechatAccount = (rule, value, callback) => {
        if (this.financeForm.settlementAccountType == 1) {
            if (!value) {
                callback(new Error("请输入微信账号"));
            } else {
                callback();
            }
        } else {
            callback();
        }
    };
    //商户合同信息List
    var checkContractFileList = (rule, value, callback) => {
        if (value.length == 0) {
            callback(new Error("请输入微信账号"));
        } else {
            callback();
        }
    };
    return {
      //商户基础信息
      companyConcatForm:{
        'id':'',
        'orgNumber':'',
        'merchantCode':'',
        'name':'',
        'merchantType':'',
        'companyName':'',
        'legalPersonName':'',
        'legalPersonType':'',
        'legalPersonIdNumber':'',
        'legalPersonMobile':'',
        'credentialsDate':'',
        'businessLicenseNumber':'',
        'socialCreditCode':'',
        'companyType':'',
        'businessScope':'',
        'businessLicenseDate':'',
        'businessStart':'',
        'businessEnd':'',
        'registeredProvinceId':'',
        'registeredCityId':'',
        'registeredRegionId':'',
        'registeredDetailAddress':'',
        'registeredCapital':'',
        'population':'',
        'businessConditions':'',
        'institutionsCategory':'',
        'taxResidentIdentity':'',
        'contactName':'',
        'contactMobile':'',
        'contactEmail':'',
        'contactAddressProvinceId':'',
        'contactAddressCityId':'',
        'contactAddressRegionId':'',
        'contactAddressDetail':'',
        'customerServiceContact':'',
        'serviceTime':'',
        'merchantStatus':'',
        'status':'',
      },
      //商户基本信息校验
      dataFormRules: {
        // orgNumber: [{required: true, message: "请输入商户编码", trigger: "blur"}],
        name: [{required: true, message: "请输入商户名称", trigger: "blur"}],
        merchantType: [{required: true, message: "请选择商户类型", trigger: "change"}],
        companyName: [{required: true, message: "请输入公司名称", trigger: "blur"}],
        legalPersonName: [{required: true, message: "请输入法人姓名", trigger: "blur"}],
        legalPersonType:[{required: true, message: "请选择法人证件类型", trigger: "change"}],
        legalPersonIdNumber: [{required: true, message: "请输入法人证件号码", trigger: "blur"}, {validator: isNumber,trigger: "blur"}],
        legalPersonMobile: [{required: true, message: "请输入法人手机", trigger: "blur"}, {validator: validatePhone,trigger: "blur"}],
        credentialsDate: [{required: true, message: "请输入法人证件有效期限", trigger: "blur"}],
        socialCreditCode: [{required: true, message: "请输入统一社会信用代码", trigger: "blur"}],
        companyType: [{required: true, message: "请选择公司类型", trigger: "change"}],
        businessScope: [{required: true, message: "请输入经营范围", trigger: "blur"}],
        businessLicenseDate: [{required: true, message: "请输入营业执照成立日期", trigger: "blur"}],
        registeredProvinceId: [{required: true, message: "请选择省", trigger: "change"}],
        registeredCityId: [{required: true, message: "请选择市", trigger: "change"}],
        registeredRegionId: [{required: true, message: "请选择区县", trigger: "change"}],
        registeredDetailAddress: [{required: true, message: "请输入详细地址", trigger: "blur"}],
        institutionsCategory: [{required: true, message: "请选择机构类型", trigger: "change"}],
        taxResidentIdentity: [{required: true, message: "请选择机构税收居民身份", trigger: "change"}],
        contactName: [{required: true, message: "请输入联系人姓名", trigger: "blur"}, {validator: validateContacts,trigger: "blur"}],
        contactMobile: [{required: true, message: "请输入联系手机号", trigger: "blur"},{validator: validatePhone,trigger: "blur"}],
        contactEmail: [{required: true, message: "请输入联系人邮箱", trigger: "blur",pattern:/^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/}],
        contactAddressProvinceId: [{required: true, message: "请选择省", trigger: "change"}],
        contactAddressCityId: [{required: true, message: "请选择市", trigger: "change"}],
        contactAddressRegionId: [{required: true, message: "请选择区县", trigger: "change"}],
        contactAddressDetail: [{required: true, message: "请输入详细地址", trigger: "blur"}],
        customerServiceContact: [{required: true, message: "请输入客服联系方式", trigger: "blur"}],
        serviceTime: [{required: true, message: "请输入服务时间", trigger: "blur"}],
      },
      terms:"", //协议名称
      acProtocol:false,//是否勾选协议
      isShow:false,//是否显示
      
      dialogFormVisible: false,//审核弹窗
      verifyForm:{
        reviewReason:"",
        retailStatus:null
      },

      tableDataCertifications: [],//资质证书list
      imgUpload: "http://wlhya.zgt56.com/cmn/imgUpload",//上传地址
      certificationModal: false,//资质证书弹窗
      bill_photo_list: [],//资质证书图片list

      invoiceTitleTypeList:[],
      invoiceTypeList:[],
      //财务基本信息
      financeForm:{
        merchantId:'',
        settlementAccountType:'',
        billingCycle:'',
        collectionName:'',
        receivingBank:'',
        accountBankNumber:'',
        receivingBankAccount:'',
        alipayAccount:'',
        wechatAccount:'',
        suretyAccountName:'',
        suretyAccount:'',
        beneficiaryName:'',
        beneficiaryMobile:'',
        beneficiaryLicenseNumber:'',
        beneficiaryCertificateDate:'',
        beneficiaryAddress:'',
        invoiceCustomerCode:'',
        invoiceTitle:'',
        taxpayerCode:'',
        taxpayerAddress:'',
        taxpayerPhone:'',
        accountBank:'',
        account:'',
        invoiceMailingAddress:'',
        invoiceRecipientName:'',
        invoiceRecipientPhone:'',
        reconciliationAddress:'',
        reconciliationPhone:'',
        invoiceTitleType:'',
        invoiceType:'',
      },
      alipay:false,
      wechat:false,
      financeRules: {
        settlementAccountType: [{required: true, message: "请选择商户结算账户类型", trigger: "change"}],
        alipayAccount: [{required: true, validator: checkAlipayAccount, trigger: "blur"}],
        wechatAccount: [ {required: true, validator: checkWechatAccount, trigger: "blur"}],
        suretyAccountName: [{required: true, message: "请输入保证金账户名称", trigger: "blur"}],
        suretyAccount: [{required: true, message: "请输入保证金账户", trigger: "blur"}],
        suretyAmount: [{required: true, message: "请输入保证金金额(元)", trigger: "blur"}],
        beneficiaryName: [{required: true, message: "请输入保证金账户受益人姓名", trigger: "blur"}],
        beneficiaryMobile: [{required: true, message: "请输入保证金账户受益人联系方式", trigger: "blur"},{validator: validatePhone,trigger: "blur"}],
        beneficiaryLicenseNumber: [{required: true, message: "请输入保证金账户受益人证件号码", trigger: "blur"}],
        beneficiaryCertificateDate: [{required: true, message: "请输入保证金账户受益人身份证有效期限", trigger: "blur"}],
        beneficiaryAddress: [{required: true, message: "请输入保证金账户受益人地址", trigger: "blur"}],
        invoiceCustomerCode: [{required: true, message: "请输入发票客户编码", trigger: "blur"}],
        invoiceTitle: [{required: true, message: "请输入发票抬头", trigger: "blur"}],
        taxpayerCode: [{required: true, message: "请输入纳税人识别码", trigger: "blur"}],
        taxpayerAddress: [{required: true, message: "请输入地址", trigger: "blur"}],
        taxpayerPhone: [{required: true, message: "请输入电话", trigger: "blur"},{validator: validatePhone,trigger: "blur"}],
        accountBank: [{required: true, message: "请输入开户行", trigger: "blur"}],
        account: [{required: true, message: "请输入开户账号", trigger: "blur"}],
        invoiceMailingAddress: [{required: true, message: "请输入发票邮寄地址", trigger: "blur"}],
        invoiceRecipientName: [{required: true, message: "请输入发票收件人姓名", trigger: "blur"}],
        invoiceRecipientPhone: [{required: true, message: "请输入发票收件人电话", trigger: "blur"},{validator: validatePhone,trigger: "blur"}],
        reconciliationAddress: [{required: true, message: "请输入对账地址", trigger: "blur"}],
        reconciliationPhone: [{required: true, message: "请输入对账联系人电话", trigger: "blur"}],
        // invoiceTitleType: [{required: true, message: "支持发票抬头", trigger: "blur"}],
        // invoiceType: [{required: true, message: "支持发票类型", trigger: "blur"}],
      },
      //新增合同基本信息
      contractForm:{
        contractCode:"",
        contractStartDate:"",
        contractEndDate:"",
        contractDate:[],
        remark:"",
        contractFileList:[]
      },
      contractFormRules: {
        contractCode: [{required: true, message: "请输入合同编码", trigger: "blur"}],
        contractDate:[{required: true, message: "请选择合同生效日期", trigger: "change"}],
        contractFileList: [{validator: checkContractFileList,trigger: "change"}],
      },
      //合同信息列表
      contractList:[],
      contractListTotal:0,

      showContract:false, // 是否显示新增合同弹窗
      //合同上传文件list
      contractFileList:[],
      showAddContract:true,//合同弹窗保存按钮


      showCommonModal: false,        // 是否显示弹窗
      showArea:false,                // 是否显示销售区域弹窗
      termModel: false,
      isAllowOperate:false,
      content:"",
      cid: this.$route.params.cid,
      showId:this.$route.params.isShow,
      num:1,
      imageUrl: "",
      fileUrl:"",
      size: "small",
      fileList: {},
      response: {},
      file: {},
      imgs: "",
      imgs1: "",
      imgs2: "",
      index: 1,
      dataForm: {
        name: "",
        businesslicense: "",
        paperwork_photo: "",
        manager_photo: ""
      },
      tableDataCategory:[{}],
      tableDataBrand: [{}],//品牌tabledata
      tableDataChannel: [{}],
       defaultProps: {
        children: "categoryList",
        label: "name"
      },
      categoryData: [],
      categoryids:[],
      categorycode:[],
      categoryname:[],
      dialogImageUrl: "",
      loading: false,
      dialogVisibleImage: false,
      categoryModal:false,//类目弹框
      brandModal:false,
      addInp :false,
      mask:false,
      brand1:false,
      brand2:false,
      loginForm: {
        account: "",
        password: "",
        captcha: "",
        src: ""
      },
      certificationRules:{
        certificateName: [{required: true, message: "请输入证书名称", trigger: "blur"}],
        periodBegin: [{required: true, message: "请输入证书有效期起", trigger: "blur"}],
        periodEnd: [{required: true, message: "请输入证书有效期止", trigger: "blur"}],
      },
      certificationForm:{

      },
      brandForm:{

      },

      checked: true,

    };
  },
  methods: {

    //商户基本信息
    queryInfoBasic(){
       let this_=this;
       var query= {};
       if(this.cid !=null && this.cid !=0){
          query.id=this_.cid
          merchantRequest.getMerchantInfo(query, function (res) {
            if (res.code == "0000") {
              this_.acProtocol=true;
              this_.companyConcatForm = Object.assign({}, res.data);
            }else {

            }
          });
       }
    },

    // 基本信息编辑
    submitForm: function() {
        
        this.$refs.companyConcatForm.validate(valid => {
          if(valid){
            if (!$(".el-checkbox input[type='checkbox']").is(':checked')) {
              this.$message({message: '请阅读并勾选'+'《'+this.terms+'》', type: 'error'});
              return;
            }
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
                let this_=this
                let params = Object.assign({}, this.companyConcatForm);
                params.id=this_.cid
                if(this_.cid ==null || this_.cid == 0 ){
                  merchantRequest.addMerchantInfo(params, res=>{
                    if(res.code == "0000"){
                      this_.$router.push({path:"/MerchantEditPage/" + res.data + '/' + 0 + '/' +0});
                      this_.$message({ message: "操作成功", type: "success" });
                    }else {
                      this_.$message({ message: data.msg, type: "error" });
                    }
                  });
                }else {
                  merchantRequest.updateMerchant(params, res=>{
                    if(res.code == "0000"){
                      this_.queryInfoBasic();
                      this_.$message({ message: "操作成功", type: "success" });
                    }else {
                      this_.$message({ message: data.msg, type: "error" });
                    }
                  });
                }
            });
          }
       });
    },

    //省市县联动
    selected(data){
      this.mask =false;
      this.addInp = false;
      this.companyConcatForm.registeredProvinceId=data.province.value
      this.companyConcatForm.registeredCityId=data.city.value
      this.companyConcatForm.registeredRegionId=data.area.value
    },
    //省市县联动
    selectContact(data){
      this.mask =false;
      this.addInp = false;
      this.companyConcatForm.contactAddressProvinceId=data.province.value
      this.companyConcatForm.contactAddressCityId=data.city.value
      this.companyConcatForm.contactAddressRegionId=data.area.value
    },

    //入驻条款查询
    getTermsInfo() {
      let this_ = this;
      let param = {};
      param.entryType = 1;
      this.utils.request.getTermsInfo(param, function(res) {
        if (res.data != null) {
          this_.terms = res.data.title;
          this_.content = res.data.content;
        }
      });
    },
    //入驻条款显示
    aleryTerm: function(data) {
      let this_ = this;
      this_.termModel = true;
    },
    //关闭入驻条款弹窗
    clearTermModel: function(data) {
      let this_ = this;
      this_.termModel = false;
    },


//-------------资质证书----------------------------------start
    //页面回显资质证书
    queryInfoCertifications(){
       let this_=this;
       var query= {};
       if(this.cid !=null && this.cid !=0){
         query.merchantId=this_.cid
         query.deleteFlag=0
         this.utils.request.queryCertificateList(query, function (res) {
         if (res.data != null) {
            this_.tableDataCertifications=res.data
        }
       });
       }
    },
    //添加资质证书
    addCertifications (){
      this.certificationForm.certificate_type = 6;
      if(this.cid !=null && this.cid !=0){
        this.certificationForm.merchant_id = this.cid;
      }else{
        this.$message({ message: "请先填写保存商户基本信息后，再来添加", type: "warning" });
        return false;
      }
      this.certificationModal=true;
    },
    //修改资质证书弹窗
    eidtCertificate(data){

      console.log(data);
      var that = this;
      that.certificationForm = data;
      if(data.fileUrl != null || data.fileUrl != ""){
        that.bill_photo_list = data.fileUrl.split(",");
      }else{
        that.bill_photo_list = [];
      }
      that.certificationModal = true;
    },
    //保存方法
    saveCertification(){
      this.$refs.certificationForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let this_=this
            let params = Object.assign({}, this_.certificationForm);
            var fileUrl = this_.fileUrl.split(",");
            //过滤多余的','
            params.fileUrl = fileUrl .filter(function(e) {
                if (this_.utils.isNull(e)) {
                } else {
                  return e;
                }
              }).join(",");

            params.merchantId=this_.cid
            this.utils.request.editCertificateInfo(params, res =>{
              if (res.code == "0000") {
                this.$message({ message: "操作成功", type: "success" });
                this.queryInfoCertifications();
                this.certificationModal=false;
              } else {
                this.$message({ message: res.msg, type: "error" });
              }
            });
          });
        }
      });
    },
    //删除资质证书
    deleteCertificate(id){
      this.$confirm("确认删除吗？", "提示", {}).then(() => {
        let this_=this
        let query = {
          'id':id
        };
        this.utils.request.deleteCertificateInfo(query, res=>{
            if (res.code == "0000") {
              this.$message({ message: "操作成功", type: "success" });
              this.queryInfoCertifications()
            } else {
              this.$message({ message: res.msg, type: "error" });
            }
        });
      });
    },
    clearFiles() {
      this.$refs["upload"].clearFiles();
    },
    handleCloseCertificate() {
      this.fileUrl="";
      this.certificationForm={},
      this.bill_photo_list = [];
      this.$refs.certificationForm.resetFields();
    },
    //资质证书 图片移除
    handleRemove(file, fileList, index) {
      if (this.utils.isNull(index)) {
        this.fileList = fileList;
        if (fileList.length == 0) {
          this.fileUrl = "";
        } else {
          this.imgs = fileList
            .map(item => item.response.data.imgUrl)
            .toString();
          this.fileUrl = this.imgs;
        }
      } else {
        this.bill_photo_list.splice(index, 1);
      }
    },
   //资质证书 处理图片卡预览
    handlePictureCardPreview(res, file) {
      this.dialogImageUrl = file;
      this.dialogVisibleImage = true;
    },
    //资质证书上传成功回调
    handleAvatarSuccess(res, file) {
      var this_=this
      let url = res.data.imgUrl;
      if (res.data.imgUrl == "") {
        this_.$message({ message: "上传失败", type: "error" });
      } else {
        this_.fileUrl += url + ",";
        this.imageUrl = URL.createObjectURL(file.raw);
      }
    },

//--------------资质证书---------------------------------------------------------end
//--------------财务信息---------------------------------------------------------start
    //财务信息查询
    getMerchantFinanceByMerchantId(){
       let this_=this;
       if(this.cid !=null && this.cid !=0){
         var query= {
            merchantId: this_.cid
         };
         merchantRequest.getMerchantFinanceByMerchantId(query, function (res) {
          if (res.data != null) {
            this_.financeForm = Object.assign({}, res.data);
            if(res.data.accountType==1){
              this.wechat=false;
              this.alipay=false;
            }else if(res.data.accountType==2){
              this.wechat=true;
              this.alipay=false;
            }else if(res.data.accountType==3){
              this.alipay=true;
              this.wechat=false;
            }
          }
        });
      }
    },
    submitFinanceForm: function() {
      this.$refs.financeForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let this_=this
            let params = Object.assign({}, this.financeForm);
            params.merchantId=this_.cid;
            if(this_.cid != 0 && this_.cid != null && this_.cid !=''){
              merchantRequest.addMerchantFinanceInfo(params, res=>{
                if(res.code == '0000'){
                  this.$message({ message: "操作成功", type: "success" });
                  this.getMerchantFinanceByMerchantId();
                }else {
                  this.$message({ message: res.msg, type: "error" });
                }
              });
            } else {
              this.$message({ message: "请先填写保存商户基本信息后，再来添加", type: "warning" });
            }
          });
        }
      });
    },
    //切换 微信 支付宝结算显示
    chooseApply(data){
      if(data==1){
        this.wechat=false;
        this.alipay=false;
      }else if(data==2){
        this.wechat=true;
        this.alipay=false;
      }else if(data==3){
        this.alipay=true;
        this.wechat=false;
      }
    },
//--------------财务信息---------------------------------------------------------end
//--------------合同信息---------------------------------------------------------start
    downloadContractFile(url, id){
      let a = document.createElement(id);
      a.href = url; // 这里的请求方式为get，如果需要认证，接口上需要带上token
      a.click()
    },
    // 显示新增合同
    addContract() {
      this.showContract = true;
      this.showAddContract = true;
      this.contractForm = {
        contractCode:"",
        contractStartDate:"",
        contractEndDate:"",
        contractDate:null,
        remark:"",
        contractFileList:[]
      };
      this.$nextTick(() => {
        this.$refs['contractForm'].clearValidate();
      });
    },

    deleteContractFile(id){
      let index;
      for(var i=0;i<this.contractForm.contractFileList.length;i++){
        if(this.contractForm.contractFileList[i].id == id){
          index = i;
        }
      }
      merchantRequest.deleteContractFile({id:id},res =>{
        if(res.code == "0000"){
          this.contractForm.contractFileList.splice(index ,1);
          this.$message({ message: "操作成功", type: "success" });
        }else{

        }
      });

    },
    contractFileSuccess(response, file, fileList){
      //注： 根据上传接口返回数据格式更改
      console.log(file);
      let fileData = {
        fileName: file.name,
        fileUrl: response.data.imgUrl,
        merchantId: this.cid,
      }
      merchantRequest.addContractFile(fileData,res =>{
        if(res.code == "0000"){
          this.contractForm.contractFileList.push(res.data);
        }else{
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    getContractListByMerchantId(){
      let that = this;
      if(that.cid !=0){
        merchantRequest.getContractListByMerchantId({merchantId:that.cid},res =>{
          if(res.code == "0000"){
              that.contractList = res.data.rows;
              that.contractListTotal = res.data.total;
          }else {
              that.contractList = [];
              that.contractListTotal = 0;
          }
        });
      }
    },
    getContractInfo(data){
      let that = this;
      this.contractForm = {
        contractCode:"",
        contractStartDate:"",
        contractEndDate:"",
        contractDate:[],
        remark:"",
        contractFileList:[]
      };
      merchantRequest.getContractInfo(data,res =>{
        if(res.code == "0000"){
            that.contractForm = res.data;
            let contractDate = [new Date(res.data.contractStartDate),new Date(res.data.contractEndDate)];
            that.contractForm.contractDate = contractDate;
            that.showContract = true;
            that.showAddContract = false;
        }else {
          this.$message({message: res.msg,type:'error'});
        }
      });
    },
    addContractInfo(){
      this.$refs.contractForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let this_=this
            let params = Object.assign({}, this.contractForm);
            params.merchantId=this_.cid;
            params.contractStartDate = this_.contractForm.contractDate[0];
            params.contractEndDate  = this_.contractForm.contractDate[0];
            if(this_.cid != 0 && this_.cid != null && this_.cid !=''){
              merchantRequest.addContractInfo(params, res=>{
                if(res.code == '0000'){
                  this.showContract = true;
                  this.$message({ message: "操作成功", type: "success" });
                  this.getContractListByMerchantId();
                }else {
                  this.$message({ message: res.msg, type: "error" });
                }
              });
            } else {
              this.$message({ message: "请先填写保存商户基本信息后，再来添加", type: "warning" });
            }
          });
        }
      });
    },


//--------------合同信息---------------------------------------------------------end

    // 显示公众弹窗
    addshowCommonModal() {
      this.showCommonModal = true;
    },
    // 显示销售区域弹窗
    addArea() {
      this.showArea = true;
    },



//页面回显基本信息-------------------------------------------------------------------------------
    //是否为查看
    show(){
      if(this.showId==1){
        this.isShow=true;
      }
    },
    
    //商户审核弹窗
    merchantReviewView(data){
      //默认通过
      this.$nextTick(() => {
        this.verifyForm.retailStatus = 3;
        this.verifyForm.id = data.id;
        this.verifyForm.reviewReason = '';
        this.dialogFormVisible = true;
      });
    },
    //审核商户
    merchantReview(){
      let that = this;
      this.$confirm("确定提交审核？", "提示", {
        type: "warning",
        closeOnClickModal: false,
        cancelButtonText: '取 消',
        confirmButtonText: '继 续',
      }).then(() => {
        that.verifyForm.statusType=1;
        merchantRequest.merchantReview(that.verifyForm, res=>{
          if(res.code == "0000"){
            that.companyConcatForm.retailStatus = that.verifyForm.retailStatus==3?3:1;
            that.$message({ message: "操作成功",   type: "success"});
            that.dialogFormVisible = false;
          }else if(res.code == "9999") {
            that.$message({ message: + res.msg,   type: "error"});
          }
        });
      }).catch(() => {
      });
    },
    
    //撤销提交
    revokeReview(data){
      let that = this; 
      //判断状态是否为待提交
      if(data.retailStatus != 2){
        that.$message({ message: "当前状态不可操作",   type: "warning"});
        return false;
      }
      this.$confirm("确定撤销提交？", "提示", {
        type: "warning",
        closeOnClickModal: false,
        cancelButtonText: '取 消',
        confirmButtonText: '继 续',
      }).then(() => {
        merchantRequest.revokeReview(data, res=>{
          if(res.code == "0000"){
            that.companyConcatForm.retailStatus = 1;
            that.$message({ message: "操作成功",   type: "success"});
          }else if(res.code == "9999") {
            that.$message({ message: res.msg,   type: "error"});
          }
        });
      }).catch(() => {});
      
    },


  },
  mounted() {
    this.queryInfoBasic();//查询商家基础信息
    this.queryInfoCertifications();//查询资质证书
    this.getMerchantFinanceByMerchantId();//查询财务信息
    this.getContractListByMerchantId();//查询合同列表
    this.getTermsInfo();
    this.show();
  },
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor
    })
  }
};


</script>

<style lang="scss" scoped>
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
   .el-tree-node{
      .el-tree-node__content>label.el-checkbox {
          display: none;
      }
  }
}
.margin{
  margin: 5px 0 20px;
}
</style>
<style  scoped lang='scss'>
/deep/ .form .el-input__inner {
  width: 880px !important;
}
.form .el-textarea__inner {
  width: 880px !important;
}
 .form .item {
    padding: -5px 0;
  }
  /deep/.distpicker-address-wrapper select {
    padding: .5rem .75rem;
    height: 34px;
    font-size: 0.8rem;
    width: 290px;
}
/deep/.el-date-editor .el-input__inner {
  width: 200px !important;
}
.form .el-form-item--small.el-form-item {
    margin-bottom: 13px;
}
 /deep/ .box-card{
    width: 100%;
    height: auto;
 }


.viewForm{
  margin-left: 10%;
  margin: 1% 1% 1% 5%;
  /deep/ .el-form-item__label{
    font-size: 22px;
  }
  /deep/ .el-form-item__content{
    font-size: 22px;
  }
}
.view-button{
  text-align: left;
  width: 100%;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-left: 5%;
  margin-bottom: 1%;
}

</style>
